<template>
  <div id="login">
    <div class="form-wrap">
      <div class="form-left"><h2>后台管理系统</h2></div>
      <div class="form-right">
        <el-form ref="formRef" :model="form" :rules="form_rules" status-icon>
          <p>欢迎登录</p>
          <el-form-item prop="account">
            <label class="form-label" for="username">用户名</label>
            <el-input id="username" placeholder="请输入用户名" v-model="form.account" clearable />
          </el-form-item>
          <el-form-item prop="password">
            <label class="form-label" for="password">密码</label>
            <el-input
              type="password"
              id="password"
              placeholder="请输入密码"
              v-model="form.password"
              show-password
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="el-button-block" @click="handleSubmitForm"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from 'vue'
import useStore from '@/stores'
import { useRouter } from 'vue-router'
import { validate_account, validate_password } from '@/utils/validate'
import { ElMessage } from 'element-plus'

import sha1 from 'js-sha1'
const formRef = ref(null)

const store = useStore()
const router = useRouter()

const validate_name_rules = (rule, value, callback) => {
  const valid = validate_account(value)
  if (value === '') {
    callback(new Error('请输入用户名'))
  } else {
    if (!valid) {
      callback(new Error('用户名格式不正确，必须包含字母'))
    }
    callback()
  }
}

const validate_password_rules = (rule, value, callback) => {
  const valid = validate_password(value)
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (!valid) {
      callback(new Error('密码格式不正确,长度为6-20位之间,只包含数字和大小写字母!'))
    }
    callback()
  }
}

const data = reactive({
  form: {
    account: '',
    password: '',
  },
  form_rules: {
    account: [{ validator: validate_name_rules, trigger: 'change' }],
    password: [{ validator: validate_password_rules, trigger: 'change' }],
  },
  // 登录按钮的禁用状态
  // submit_button_disabled: true,
})
let { form, form_rules } = toRefs(data)

const handleSubmitForm = async () => {
  // formRef.value.validate((valid) => {
  //   console.log('valid', valid)
  // })
  const { account, password } = form.value
  // 密码加密
  // const new_password = sha1(password)
  const requestData = {
    username:account,
    password: password,
  }
  try {
    const res = await store.app.loginAction(requestData)

    // store.app.updateToken(res.data.token)
    // store.app.updateUsername(res.data.username)
    ElMessage.success(res.msg)
    router.push({ name: 'Outfit' })
  } catch (error) {
    console.log(error)
  }
}
</script>

<style lang="scss" scoped>
#login {
  height: 100vh;
  display: flex;
  // background-color: skyblue;
}
.form-wrap {
  width: 740px;
  height: 420px;
  margin: auto;
  display: flex;
  border: 1px solid red;
}
.form-left {
  width: 370px;
  background-color: pink;
  h2 {
    text-align: center;
    padding-top: 180px;
  }
}
.form-right {
  width: 370px;
  display: flex;
  justify-content: center;
  align-items: center;
  p {
    font-weight: bold;
    font-size: 2em;
    text-align: center;
  }
}
</style>